<template>
    <div class="register">
        <mt-field label="用户名" placeholder="请输入用户名" v-model="options.username"></mt-field>
        <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="options.mobile"></mt-field>
        <mt-field label="密码" placeholder="请输入密码" type="password" v-model="options.password"></mt-field>
        <mt-field label="密码" placeholder="请确认密码" type="password" ></mt-field>
        <mt-field label="验证码" v-model="options.vCode">
           <mt-button type="primary" @click="getvcode">获取验证码</mt-button>
        </mt-field>
        <mt-button type="primary" size="large" @click="registerSubmit">注册</mt-button>
    </div>
</template>

<script>
import { register, vcode } from '@/api/index'
export default {
  data () {
    return {
      options: {
        mobile: '',
        password: '',
        username: '',
        vCode: ''
      }
    }
  },
  mounted () {
    this.$store.state.title = '注册'
  },
  methods: {
    getvcode () {
      vcode().then(res => {
        console.log(res.vCode)
        this.options.vCode = res.vCode
      })
    },
    registerSubmit () {
      console.log(this.options)
      register(this.options).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
    .register{
        padding: 10px;
    }
</style>
